<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.3.1.min.js" type="application/ecmascript"></script>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <!--    <link rel="stylesheet" href="static/modules/soulTable.css" media="all" />-->
    <link rel="stylesheet" href="/modules/soulTable.css" media="all"/>
    <!--    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">-->
    <!--    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>-->
    <script src="/vue/vue.js"></script>
</head>
<style>
    /*设置layui行高*/
    .layui-table-cell {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*设置不可编辑时字体颜色*/
    .layui-disabled, .layui-disabled:hover {
        color: #101010 !important;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*设置表格单元格线样式*/
    .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
        border-color: #ccc; /*#bbb*/
    }

    .form-container {
        display: flex;
        flex-wrap: wrap;
        width: 1200px;
        /*gap: 10px;*/
    }

    .layui-col-sm3 {
        flex: 1;
        max-width: 200px;
    }

    .purchaseItemRow {
        /*overflow-x:auto;*/
        white-space: nowrap;
        overflow: auto;
        width: 100%;
        height: 300px;
    }

    /* 弹窗标题栏样式 */
    #buttonDemo {
        position: relative;
        top: 0px;
        /*z-index: 9999;*/
    }

    /* 要固定的按钮的样式 */
    #rowAdd {
        position: absolute; /* 设置按钮为绝对定位 */
        top: 10px; /* 调整按钮距离标题栏顶部的距离，可以根据需要自行调整 */
        left: 20px;; /* 调整按钮距离标题栏右侧的距离，可以根据需要自行调整 */
    }

    #addCon {
        position: absolute; /* 设置按钮为绝对定位 */
        top: 10px; /* 调整按钮距离标题栏顶部的距离，可以根据需要自行调整 */
        left: 120px; /* 调整按钮距离标题栏右侧的距离，可以根据需要自行调整 */
    }

    #primary {
        position: absolute; /* 设置按钮为绝对定位 */
        top: 10px; /* 调整按钮距离标题栏顶部的距离，可以根据需要自行调整 */
        left: 200px; /* 调整按钮距离标题栏右侧的距离，可以根据需要自行调整 */
    }

    .layui-layer-title {
        padding: 0 81px 0 16px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 2px 2px 0 0;
        text-align: center;
    }

    /*添加一行*/
    .layui-layer-setwin span {
        position: fixed;
        width: 16px;
        height: 16px;
        line-height: 18px;
        margin-left: 10px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        color: #000;
        /*left: 280px;*/
        left: -100px;
        top: 10px;
        _overflow: hidden;
        /*display: none;*/
    }

    .layui-layer-setwin .layui-layer-close2 {
        position: fixed;
        left: 260px;
        top: 15px;
        color: #fff;
        background-color: #787878;
        padding: 3px;
        border: 3px solid;
        width: 18px;
        height: 18px;
        font-size: 18px;
        font-weight: bolder;
        border-radius: 50%;
        margin-left: 0;
        *right: -18px;
        _display: none;
    }

    .layui-col-space16 > * {
        /* padding: 8px; */
        position: relative;
        top: 20px;
    }

    .layui-input {
        /*margin-top: -50px;*/
    }

    .layui-input, .layui-select, .layui-textarea {
        height: 30px;
        line-height: 1.3;
        line-height: 38px \9;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        color: rgba(0, 0, 0, .85);
        border-radius: 3px;
    }

    /* 调整表单项之间的垂直间距 */
    .layui-form-item {
        margin-bottom: -5px; /* 调整表单项之间的垂直间距，根据需要自行调整 */
    }

    .layui-form-item:focus-within .layui-input {
        border-color: #007bff !important;
        opacity: 0.6;
    }

    /* 子表*/
    .lab {
        width: 80px;
        text-align: center;
        line-height: 30px;
    }

    /*物料信息表的添加*/
    .centered-modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        background-color: #4476a7;
        padding: 30px;
        z-index: 9999;
    }

</style>
<body>

<div class="layui-layout layui-layout-admin">
    <!-- 顶部导航栏 -->
    <div class="layui-header" style="background-color: #0270c1; color: #fff; height: 50px;">
        <!-- 顶部内容，这里可以放置logo、菜单等内容 -->
        <div class="layui-logo" style="color: white">Login</div>
        <!-- 顶部右侧菜单 -->
        <ul class="layui-nav layui-layout-right">
            <!-- 更多菜单项 -->
            <li class="layui-nav-item layui-this"><a href="nav.html">选中</a></li>
            <li class="layui-nav-item">
                <a href="javascript:">常规</a>
            </li>
            <li class="layui-nav-item"><a href="nav.html">导航</a></li>
            <li class="layui-nav-item">
                <a href="javascript:">子级</a>
                <dl class="layui-nav-child">
                    <dd><a href="nav.html">菜单1</a></dd>
                    <dd><a href="nav.html">菜单2</a></dd>
                    <dd><a href="nav.html">菜单3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">选项</a>
                <dl class="layui-nav-child">
                    <dd><a href="nav.html">选项1</a></dd>
                    <dd class="layui-this"><a href="nav.html">选项2</a></dd>
                    <dd><a href="nav.html">选项3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="nav.html">演示</a></li>
            <li class="layui-nav-item">
                <a href="javascript:">个人中心</a>
            </li>
        </ul>

    </div>
    <!-- 侧边栏 -->
    <div class="layui-side" style=" width: 150px; background-color: #374768; color: #fff;margin-top: -10px;">
        <!-- 侧边栏内容 -->
        <div class="layui-side-scroll" style="background-color: #374768; color: #fff ;">
            <!-- 侧边栏菜单 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="sideNav" style="background-color: #374768; color: #fff; ">
                <!-- 新增按钮 -->
                <div class="auto-width-btn" style="position: fixed; bottom: 20px; left: 20px;">
                    <!--                    <button class="layui-btn layui-btn-sm" id="adjustWidthBtn">自动调节宽度</button>-->
                </div>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:">默认展开</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">选项1</a></dd>
                        <dd><a href="javascript:">选项1</a></dd>
                        <dd><a href="javascript:">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:">默认收缩</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">选项1</a></dd>
                        <dd><a href="javascript:">选项2</a></dd>
                        <dd><a href="javascript:">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:">菜单1</a></li>
                <li class="layui-nav-item"><a href="javascript:">菜单2</a></li>
                <li class="layui-nav-item"><a href="javascript:">菜单3</a></li>
            </ul>
        </div>
    </div>
    <!-- 主体内容区域 -->
    <div class="layui-body" style="margin-top: -10px;margin-left: -49.3px;">
        <table class="layui-hide" id="myTable" lay-filter="test">
        </table>
    </div>

</div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        <button class="layui-btn layui-btn-sm" id="dropdownButton">
            下拉按钮
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
            重载测试
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
<!--            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>-->
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>
</script>
<script type="text/html" id="cityTpl">
    <select id="demoCity1" class="layui-border" lay-ignore>
        <option value="管理部信息组">管理部信息组</option>
        <option value="管理部法务组">管理部法务组</option>
        <option value="销售组">销售组</option>
        <option value="轧机组">轧机组</option>
    </select>
</script>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>
<script>

    // 自定义模块
    layui.config({
        base: '/modules/ext/', // 模块目录
        version: 'v1.6.4'
    }).extend({ // 模块别名
        soulTable: 'soulTable'
    });

    layui.use(['form', 'table', 'soulTable', 'dropdown'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;
        var dropdown = layui.dropdown;
        // 后台分页
        table.render({
            elem: '#myTable',
            url: '/Purchase',
            toolbar: '#toolbarDemo',
            height: 650,
            page: true,
            limit: 20
            , text: {
                none: '对不起，您暂时没有权限!'
            }
            //添加一行
            , cols: [
                [{
                    title: '#',
                    lazy: true,
                    show: 2,
                    layerOption: {title: '我的子表', area: '800px',},
                    width: 50,
                    children: [
                        {
                            title: '采购子表',
                            url: function (row) {
                                return '/PurchaseItem/' + row.purchaseID;
                            }
                            , height: 500
                            , page: true
                            , limit: 10
                            , text: {
                                none: '对不起，您暂时没有权限!'
                            }
                            , cols: [
                                [
                                    {type: 'checkbox', fixed: 'left'}
                                    ,
                                    {
                                        field: 'purchaseItemID',
                                        fixed: 'left',
                                        width: 80,
                                        title: 'purchaseItemID',
                                        sort: true,
                                        totalRowText: '合计：'
                                    }
                                    , {
                                    field: 'purchaseID',
                                    width: 80,
                                    title: 'purchaseID',
                                }
                                    , {field: 'wpmc', width: 80, title: '物品名称', edit: 'text'}
                                    , {
                                    field: 'k3bc',
                                    title: 'k3编码 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                                    hide: 0,
                                    width: 150,
                                    edit: 'text'
                                }
                                    , {field: 'gg', width: 80, title: '规格', sort: true}
                                    , {
                                    field: 'pz',
                                    width: 115,
                                    title: '配置',
                                }
                                    , {
                                    field: 'pw',
                                    title: '品牌',
                                    width: 80,
                                }
                                    , {
                                    field: 'dw',
                                    width: 100,
                                    title: '单位',
                                    sort: true,
                                    totalRow: '{{= d.TOTAL_NUMS }} 😊'
                                }
                                    , {
                                    field: 'sl',
                                    title: '数量',
                                    width: 100,
                                    sort: true,
                                    totalRow: '{{= parseInt(d.TOTAL_NUMS) }} '
                                }
                                    , {field: 'dj', title: '单价', width: 120}
                                    , {field: 'zje', title: '总金额', width: 120}
                                    , {field: 'bz', title: '备注', width: 120}
                                    , {title: '操作', width: 134, toolbar: '#barDemo', templet: '#childBar'}
                                ]
                            ]
                            , done: function () {
                                soulTable.render(this);
                            }
                        },
                    ]
                },
                    // {type: 'checkbox', fixed: 'left'}
                    {type: 'checkbox'}
                    , {
                    field: 'purchaseID',
                    // fixed: 'left',
                    width: 80,
                    title: 'ID',
                    sort: true,
                    totalRowText: '合计：'
                }
                    , {field: 'bt', width: 80, title: '标题', edit: 'text'}
                    , {
                    field: 'lcbh',
                    title: '流程编号 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>',
                    fieldTitle: '邮箱',
                    hide: 0,
                    width: 150,
                    edit: 'text'
                }
                    , {field: 'sqr', width: 100, title: '申请人', sort: true}
                    , {
                    field: 'sqbm',
                    width: 140,
                    title: '申请部门',
                    minWidth: 115,
                    templet: '#cityTpl',
                    exportTemplet: function (d, obj) {
                        // console.log(obj)
                        // 处理该字段的导出数据
                        var td = obj.td(this.field); // 获取当前 td
                        return td.find('select').val();
                    }
                }
                    , {
                    field: 'sqrq',
                    title: '申请日期',
                    edit: 'textarea',
                    minWidth: 260,
                    style: '-moz-box-align: start;'
                }
                    , {
                    field: 'cgbt',
                    width: 100,
                    title: 'cgbt',
                    sort: true,
                    totalRow: '{{= d.TOTAL_NUMS }} 😊'
                }
                    , {
                    field: 'fqsj',
                    title: 'fqsj',
                    width: 100,
                    sort: true,
                    totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'
                }
                    , {field: 'jhrq', title: 'jhrq', width: 120}
                    , {field: 'cgsy', title: 'cgsy', width: 120}
                    , {field: 'zjg', title: '总金额', width: 120}
                    , {field: 'audit', title: '审核状态', width: 120}
                    , {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                ]
            ]
            , done: function () {
                soulTable.render(this);
                var id = this.id;
                dropdown.render({
                    elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例
                    , data: [{
                        id: 'add',
                        title: '添加'
                    }, {
                        id: 'update',
                        title: '编辑'
                    }, {
                        id: 'delete',
                        title: '删除'
                    }]
                    // 菜单被点击的事件
                    , click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'add':
                                layer.open({
                                    // title: '添加',
                                    title: false,
                                    type: 1,
                                    area: ['80%', '80%'],
                                    maxmin: true,
                                    content:
                                    <!--物料信息表的添加-->
                                        '<div id="tableContainer" class="centered-modal" style="position: absolute; top: 50%; left: 50%;">' +
                                        ' <!--        <input type="text" id="searchInput" placeholder="输入关键字进行搜索">-->' +
                                        ' <!--        <button id="searchButton">搜索</button>-->' +
                                        ' <table id="dataTable">' +
                                        '</table>' +
                                        '<div className="layui-btn-container">' +
                                        '<button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius revealed">查询</button>' +
                                        '<button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius concealed">隐藏</button>' +
                                        '</div>' +
                                        '</div>' +
                                        '<form class="layui-form layui-row layui-col-space16">' +
                                        '<div></div>' +
                                        '<div id="buttonDemo">' +
                                        '<div class="layui-btn-container">' +
                                        '<button type="button" class="layui-btn layui-btn-sm" id="rowAdd" style="margin-left: 10px;">添加一行</button>' +
                                        '</div>' +
                                        '<div class="layui-layer-btn">' +
                                        '<button type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="addCon" id="addCon">立即提交</button>' +
                                        '<button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" id="primary">重置</button>' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="form-container">' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">purchaseID:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="purchaseID" placeholder="purchaseID" class="layui-input" style="border-color: #ccc; width: 200px;" >' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">&nbsp;&nbsp;标题:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="bt" placeholder="bt" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">流程编号:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="lcbh" placeholder="lcbh" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">申请人:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="sqr" placeholder="sqr" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        // '<div class="layui-col-sm3">' +
                                        // '<input type="text" name="sqbm" placeholder="sqbm" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        // '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">申请部门:</label>' +
                                        '<div class="layui-input-block">' +
                                        '<select name="sqbm" lay-filter="aihao" style="width: 200px;"> ' +
                                        '<option value=""></option>' +
                                        '<option value="0">销售部</option>' +
                                        '<option value="1" selected>管理部</option>' +
                                        '<option value="2">采购部</option>' +
                                        '<option value="3">品质部</option>' +
                                        '<option value="4">生产部</option>' +
                                        '</select>' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">申请日期:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="sqrq" placeholder="sqrq" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">采购标题:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="cgbt" placeholder="cgbt" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">发起时间:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="fqsj" placeholder="fqsj" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">交货日期:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="jhrq" placeholder="jhrq" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">请假事由:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="cgsy" placeholder="cgsy" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">总金额:</label>' +
                                        '<div class="layui-col-sm3">' +
                                        '<input type="text" name="zjg" placeholder="zjg" class="layui-input" style="border-color: #ccc;width: 200px;">' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="layui-form-item" style="width: 300px;">' +
                                        '<label class="layui-form-label">状态:</label>' +
                                        '<div class="layui-col-sm3" style="display: inline-block;" style="border-color: #ccc;width: 200px;">' +
                                        '<input type="text" name="audit" placeholder="audit" class="layui-input" style="border-color: #ccc;width: 200px;"> ' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>' +

                                        '<div class="purchaseItemRow">' +
                                        '</div>' +
                                        '</form>',
                                    success: function (layero, index) {
                                        var form = layui.form;
                                        layer.full(index);
                                        form.render();
                                        <!-- 物料信息表-->
                                        var tableContainer = document.getElementById("tableContainer");
                                        var isDragging = false;
                                        var offsetX, offsetY;
                                        var rowLogistics;
                                        tableContainer.addEventListener("mousedown", function (event) {
                                            isDragging = true;
                                            offsetX = event.clientX - tableContainer.offsetLeft;
                                            offsetY = event.clientY - tableContainer.offsetTop;
                                        });

                                        document.addEventListener("mousemove", function (event) {
                                            if (isDragging) {
                                                var newLeft = event.clientX - offsetX;
                                                var newTop = event.clientY - offsetY;
                                                tableContainer.style.left = newLeft + "px";
                                                tableContainer.style.top = newTop + "px";
                                            }
                                        });

                                        document.addEventListener("mouseup", function () {
                                            isDragging = false;
                                        });
                                    }
                                });
                                break;
                            case 'update':
                                if (data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 1,
                                    area: ['80%', '80%'],
                                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                                });
                                break;
                            case 'delete':
                                if (data.length === 0) {
                                    return layer.msg('请选择一行');
                                }
                                layer.msg(' delete event');
                                break;
                        }
                    }
                });
                // 重载测试
                dropdown.render({
                    elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例
                    , data: [{
                        id: 'reload',
                        title: '重载'
                    }, {
                        id: 'reload-deep',
                        title: '重载 - 参数叠加'
                    }, {
                        id: 'reloadData',
                        title: '仅重载数据'
                    }, {
                        id: 'reloadData-deep',
                        title: '仅重载数据 - 参数叠加'
                    }]
                    // 菜单被点击的事件
                    , click: function (obj) {
                        switch (obj.id) {
                            case 'reload':
                                // 重载 - 默认（参数重置）
                                table.reload('test', {
                                    where: {
                                        abc: '123456'
                                        //,test: '新的 test2'
                                        //,token: '新的 token2'
                                    }
                                });
                                break;
                            case 'reload-deep':
                                // 重载 - 深度（参数叠加）
                                table.reload('test', {
                                    where: {
                                        abc: 123
                                        , test: '新的 test1'
                                    }
                                    //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                                    //,cols: ins1.config.cols
                                }, true);
                                break;
                            case 'reloadData':
                                // 数据重载 - 参数重置
                                table.reloadData('test', {
                                    where: {
                                        abc: '123456'
                                        //,test: '新的 test2'
                                        //,token: '新的 token2'
                                    }
                                    , scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                    , height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                    //,url: '404'
                                    //,page: {curr: 1, limit: 30} // 重新指向分页
                                });
                                break;
                            case 'reloadData-deep':
                                // 数据重载 - 参数叠加
                                table.reloadData('test', {
                                    where: {
                                        abc: 123
                                        , test: '新的 test1'
                                    }
                                }, true);
                                break;
                        }
                        layer.msg('可观察 Network 请求参数的变化');
                    }
                });
                // 行模式
                dropdown.render({
                    elem: '#rowMode'
                    , data: [{
                        id: 'default-row',
                        title: '单行模式（默认）'
                    }, {
                        id: 'multi-row',
                        title: '多行模式'
                    }]
                    // 菜单被点击的事件
                    , click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'default-row':
                                table.reload('test', {
                                    lineStyle: null // 恢复单行
                                });
                                layer.msg('已设为单行');
                                break;
                            case 'multi-row':
                                table.reload('test', {
                                    lineStyle: 'height: 95px;'
                                });
                                layer.msg('即通过设置 lineStyle 参数可开启多行');
                                break;
                        }
                    }
                });
            }, error: function (res, msg) {
                console.log(res, msg)
            }
        });
        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('自定义工具栏图标按钮');
                    break;
            }
        });
        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') {
                console.log(data);
                // let zje = parseInt(data.zjg);
                layer.open({
                    //编辑，查看
                    title: '编辑 - id:' + data.id,
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">已编辑</div>'
                });
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                //找到了
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('查看操作，当前行 ID:' + data.id);
                        } else if (menudata.id === 'del') {
                            layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                                obj.del(); // 删除对应行（tr）的DOM结构
                                layer.close(index);
                                // 向服务端发送删除指令
                                console.log(data.purchaseID);
                                $.ajax({
                                    url: "/deletePurchase",
                                    method: "POST",
                                    data: {
                                        purchaseID: data.purchaseID
                                    },
                                    success: function (data) {
                                        if (data.code !== 200) {
                                            alert("删除失败")
                                        }

                                    },
                                    error: function () {

                                    }
                                });
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });
        // 触发表格复选框选择
        table.on('checkbox(test)', function (obj) {
            console.log(obj)
        });

        // 触发表格单选框选择
        table.on('radio(test)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            //console.log(obj);
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
            console.log(obj);
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            var field = obj.field; // 得到字段
            var value = obj.value; // 得到修改后的值
            var data = obj.data; // 得到所在行所有键值
            // 值的校验
            if (field === 'email') {
                if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)) {
                    layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});
                    return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                }
            }
            // 编辑后续操作，如提交更新请求，以完成真实的数据更新
            // …
            layer.msg('编辑成功', {icon: 1});

            // 其他更新操作
            var update = {};
            update[field] = value;
            obj.update(update);
        });
    })
</script>
<script>
    $(function () {
        var purchaseItemRow = null;

        $(document).on("click", ".concealed", function () {
            $(".centered-modal").css("display", "none");
        })
            $(document).on("dblclick", ".layui-col-sm3 input[type='text']", function () {
            //物料信息表  .centered-modal
             purchaseItemRow = $(this).closest('.layui-form-item');
            $(".centered-modal ").css("display", "block")
            $.ajax({
                url: "/logisticsDao",
                type: "post",
                success: function (data) {
                    displayLogisticsTable(data);
                },
                error: function (data) {
                    console.log("/logisticsDao访问失败,物料信息表的查询失败");
                }
            });
        });

        function displayLogisticsTable(data) {
            var tbody = document.getElementById("dataTable");

            if (tbody) {
                while (tbody.firstChild) {
                    tbody.removeChild(tbody.firstChild);
                }
            }

            for (var i = 0; i < data.length; i++) {
                var purchaseItem = data[i];
                var row = document.createElement("tr");
                row.innerHTML =
                    "<td style='padding-left: 15px;padding-top: 10px;'>" + purchaseItem.id + "</td>" +
                    "<td style='padding-left: 15px;padding-top: 10px;'>" + purchaseItem.wpmc + "</td>" +
                    "<td style='padding-left: 15px;padding-top: 10px;'>" + purchaseItem.k3bc + "</td>" +
                    "<td style='padding-left: 15px;padding-top: 10px;'>" + purchaseItem.gg + "</td>" +
                    "<td style='padding-left: 15px;padding-top: 10px;'>" + purchaseItem.pz + "</td>" +
                    "<td style='text-align: center;padding-left: 15px;height: 20px;margin-top: 15px' class='layui-table-cell'><button type='button' class='layui-btn addLogistics'>添加</button></td>";
                tbody.appendChild(row);
            }
        }
        $(document).on("click", ".addLogistics", function () {
            if (purchaseItemRow) {
                // 获取选定的物料信息
                var selectedWpmc = $(this).closest("tr").find("td:nth-child(2)").text();
                var selectedK3bc = $(this).closest("tr").find("td:nth-child(3)").text();
                var selectedGg = $(this).closest("tr").find("td:nth-child(4)").text();
                var selectedPz = $(this).closest("tr").find("td:nth-child(5)").text();

                // 在当前行的子表中查找对应的输入框，并将物料信息填充进去
                var wpmcInput = purchaseItemRow.find("input[name='wpmc[]']");
                var k3bcInput = purchaseItemRow.find("input[name='k3bc[]']");
                var ggInput = purchaseItemRow.find("input[name='gg[]']");
                var pzInput = purchaseItemRow.find("input[name='pz[]']");
                if (wpmcInput.length > 0) {
                    wpmcInput.val(selectedWpmc);
                    k3bcInput.val(selectedK3bc);
                    ggInput.val(selectedGg);
                    pzInput.val(selectedPz);
                }
                // 隐藏 .centered-modal 元素
                $(".centered-modal").css("display", "none");
            }
        });
    })


    $(document).on("click", "#rowAdd", function () {
        //子表添加
        var rowAddData = {
            content:
                '<div class="layui-form-item ">' +
                '<div class="layui-col-sm3" style="display: inline-block;" style="border-color: #ccc;width: 200px;">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">wpmc:</div>' +
                '<input type="text" name="wpmc[]" placeholder="wpmc" class="layui-input" style="border-color: #ccc" >' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">k3bc:</div>' +
                '<input type="text" name="k3bc[]" placeholder="k3bc" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">gg:</div>' +
                '<input type="text" name="gg[]" placeholder="gg" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">pz:</div>' +
                '<input type="text" name="pz[]" placeholder="pz" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">pw:</div>' +
                '<input type="text" name="pw[]" placeholder="pw" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">dw:</div>' +
                '<input type="text" name="dw[]" placeholder="dw" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">sl:</div>' +
                '<input type="text" name="sl[]" placeholder="sl" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">dj:</div>' +
                '<input type="text" name="dj[]" placeholder="dj" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">zje:</div>' +
                '<input type="text" name="zje[]" placeholder="zje" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '<div class="layui-col-sm3" style="display: flex;">' +
                '<div class="lab">bz:</div>' +
                '<input type="text" name="bz[]" placeholder="bz" class="layui-input" style="border-color: #ccc">' +
                '</div>' +
                '</div>'+
               '</div>'
        }
        // var form = $(this).closest("form");
        var form = $(".purchaseItemRow");
        form.append(rowAddData.content);
    });
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/,
                '密码必须6到12位，且不能出现空格'
            ]
        });

        // 指定开关事件
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
        });
        // 添加提交事件
        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            // var fieldData = JSON.stringify(field);
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            $.ajax({
                url: "/UpDateController",
                method: "POST",
                dataType: 'string',
                success: function (data) {
                    location.reload(true);
                },
                error: function () {

                }
            });
            // …
            return false; // 阻止默认 form 跳转
        });
        // 修改提交事件
        form.on('submit(addCon)', function (data) {
            var fieldArray = $(data.form).serializeArray(); // 获取表单字段值，fieldArray是一个数组
            var field = {}; // 创建一个空对象，用于存储表单数据
            $.each(fieldArray, function (index, item) {
                var name = item.name;
                var value = item.value;
                if (field[name] === undefined) {
                    field[name] = [value]; // 如果是第一次出现相同name的表单，则创建一个数组
                } else {
                    field[name].push(value); // 如果已经存在相同name的表单，则将值添加到数组中
                }
            });
            console.log(field); // 这里可以看到相同name的input表单数据以数组的形式存储
            var fieldData = JSON.stringify(field);
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            $.ajax({
                url: "/UpDateController",
                method: "POST",
                dataType: 'json',
                contentType: "application/json;charsetset=UTF-8",
                cache: true,
                async: false,
                data: JSON.stringify(field),
                success: function (data) {
                    location.reload(true);
                },
                error: function () {

                }
            });
            return false;
        });

        // 日期
        laydate.render({
            elem: '#date'
        });

        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            "get-vercode": function (othis) {
                var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
                // 验证通过
                if (isvalid) {
                    layer.msg('手机号规则验证通过');
                    // 此处可继续书写「发送验证码」等后续逻辑
                    // …
                }
            }
        });
    });
</script>
<script>
    window.onload = function () {
        $.ajax({
            url: "/Authority/add",
            method: "POST",
            data: {},
            success: function (data) {
                if (data.code !== 200) {
                    console.log("111")
                    $("#dropdownButton").css({//设置 取消 按钮样式

                        "display": "none"
                    });
                }


            },
            error: function () {

            }
        });
        $.ajax({
            url: "/Authority/delete",
            method: "POST",
            data: {},
            success: function (data) {
                if (data.code !== 200) {
                    var dels = $(".layui-btn layui-btn-xs");
                    console.log($(".layui-btn layui-btn-xs"))
                    // console.log(dels.tagName)
                    dels.hide();
                    dels.css({
                        "display": "none"
                    });


                }
            },
            error: function () {

            }
        });
        $.ajax({
            url: "/Authority/up",
            method: "POST",
            data: {},
            success: function (data) {
                if (data.code !== 200) {
                    $("#update").hidden;
                }
            },
            error: function () {

            }
        });
        // JavaScript部分
        var adjustWidth = false;

        $("#adjustWidthBtn").click(function () {
            if (adjustWidth) {
                $(".layui-side").css({
                    "width": "150px"
                });
                $(".layui-body").css({
                    "margin-left": "150px"
                });
                adjustWidth = false;
            } else {
                $(".layui-side").css({
                    "width": "100px"
                });
                $(".layui-body").css({
                    "margin-left": "100px"
                });
                adjustWidth = true;
            }
        });
    }
</script>
</body>
</html>
